<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>视频播放器</title>
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
		<link rel="stylesheet" type="text/css" href="css/index.css">
		<script type="text/javascript" src="js/jquery-2.1.4-min.js"></script>
		<script type="text/javascript" src="js/methods.js"></script>
		<script type="text/javascript" src="js/list.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		
	</head>
	<body>
		<div class="bili-player">
			<div class="bili-player-wrap">
				<div class="bili-player-top">
					
				</div>
				<div class="bili-player-video">
					<div class="bili-player-state iconfont">
						&#xe6bc;
					</div>
					<video src=""></video>
				</div>
				<div class="bili-player-control">
					<div class="bili-player-control-top">
						<div class="progress">
							<div class="pro-time"></div>
							<div class="pro-line"></div>
							<div class="pro-bar"></div>
						</div>
					</div>
					<div class="bili-player-control-bottom iconfont">
						<ul>
							<li class="prev">&#xec02;</li>
							<li class="play">&#xe686;</li>
							<li class="next">&#xec03;</li>
							<li class="duration"></li>
						</ul>
						<ul>
							<li class="dm-on"></li>
							<li class="dm-set"></li>
							<li class="dm-input"></li>
							<li class="dm-send"></li>
						</ul>
						<ul>
							<li class="pro-set">&#xe609;</li>
							<li class="vol">
								<div class="vol-get">&#xe602;</div>
								<div class="vol-set">
									<div class="vol-num">50</div>
									<div class="vol-bg">
										<div class="vol-line"></div>
										<div class="vol-bar"></div>
									</div>
								</div>
							</li>
							<li class="selector">
								选集
								<div class="sel-list">
								</div>
							</li>
							<li class="hd">
								<div class="hd-show">
									自动
								</div>
								<div class="hd-list">
									<ul></ul>
								</div>
							</li>
							<li class="set">
								&#xe65d;
								<div class="setting">
									<div class="play-way">
										<div class="set-title">播放方式</div>
										<ul>
											<li>洗脑循环</li>
											<li>自动切P</li>
											<li>播完暂停</li>
										</ul>
									</div>
								<div class="play-speed">
										<div class="set-title">播放速度</div>
										<dl></dl>
										<!-- <div class="speed-line">
											<div class="speed-bar"></div>
										</div> -->
									</div> 
									<div class="video-ratio">
										<div class="set-title">视频比例</div>
										<ul>
											<li>自动</li>
											<li>4:3</li>
											<li>16:9</li>
										</ul>
									</div>
									<div class="video-type">
										<div class="set-title">播放器选择</div>
										<ul>
											<li>H5播放器(荐)</li>
											<li>Flash播放器</li>
										</ul>
									</div>
									<div class="other-set">
										<div class="set-title">其他设置</div>
										<p class="mirror">
											<input name="Checkbox" type="checkbox">
											<label>镜像播放</label>
										</p>
										<p class="light-off">
											<input name="Checkbox" type="checkbox">
											<label>关灯模式</label>
										</p>
										<p class="hide-black">
											<input name="Checkbox" type="checkbox">
											<label>清除黑边</label>
										</p>
										<p class="auto-play">
											<input name="Checkbox" type="checkbox">
											<label>自动播放</label>
										</p>
										<p class="quick-play">
											<input name="Checkbox" type="checkbox">
											<label>快速连播</label>
										</p>
									</div>
								</div>
							</li>
							<li class="wid-screen">&#xe649;</li>
							<li class="web-screen">&#xea4d;</li>
							<li class="full-screen">&#xe64e;</li>
						</ul>
					</div>
					<div class="danmu-send">
						<div class="danmu-setting iconfont">&#xe642;
							<div class="dm-set-con">
								<div class="dm-set-title">字号</div>
								<div class="dm-set-font-size">
									<p class="dm-selin-font">小</p>
									<p>标准</p>
								</div>
								<div class="dm-set-title">模式</div>
								<div class="dm-set-mode">
									<p class="dm-selin-hei">滚动</p>
									<p>顶部</p><p>底部</p>
								</div>
								<div class="dm-set-title">颜色</div>
								<div class="dm-set-font-color">
									<input type="text" value="#FFFFFF">
									<div class="show-dm-box"></div>
									<ul>
										
									</ul>
								</div>
							</div>
						</div>
						<input class="danmu-content" type="text" placeholder="请文明发言">
						<button class="danmu-btn">发送</button>
					</div>
				</div>
			</div>
			<div class="bili-video-list">
				<div class="video-flies"></div>
				<div class="video-list"></div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	$('.bili-player').player();
</script>